<template>
	<view>
		<cu-custom bgColor="solid-bottom-after bg-white" :isBack="false"><block slot="content">商圈</block></cu-custom>
		<!-- <view class="cu-custom solid-bottom-after header" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar search fixed" :style="[{top:CustomBar-45 + 'px'}]">
				<view class="cu-avatar round" style="background-image:url(/static/temp/big10001.jpg);"></view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="搜索商家" confirm-type="search"></input>
				</view>
				<view class="action">
					<text class="cuIcon-edit"></text>
					<text>入住</text>
				</view>
			</view>
		</view> -->
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 热门分类
			</view>
		</view>
		<view class="cu-list grid col-4">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav bl-nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in redNav" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view class="news-wall">
			<view class="news-item flex">
				<view class="news-title">
					<view class="title" @click="goUrl()"><text class="red">热门</text>因家里有事先急转超市地址在青华路需要的打电话。</view>
					<view class="phone"><text class="cuIcon-mobile"></text>13866666666</view>
					<view class="ts flex">
						<view class="user">
							<view class="cu-avatar sm round" style="background-image:url(/static/temp/big10001.jpg)"></view>
							<text>Tyland</text>
						</view>
						<view class="else">
							55分钟前 <view class="new-comment"><text class="cuIcon-comment"></text> 15</view>
						</view>
					</view>
				</view>
				<view class="news-image" @click="goUrl()">
					<image class="img" src="/static/temp/big11010.jpg"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}],
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				TabCur: 0,
				scrollLeft: 0,
				kjfsList:[
					{image:'/static/temp/c1.png',title:'包头爆料',url:'/pages/news/index'},
					{image:'/static/temp/c2.png',title:'二手市场',url:''},
					{image:'/static/temp/c3.png',title:'二手车',url:''},
					{image:'/static/temp/c4.png',title:'吃喝玩乐',url:''},
					{image:'/static/temp/c5.png',title:'求职招聘',url:''},
					{image:'/static/temp/c6.png',title:'房屋租售',url:''},
					{image:'/static/temp/c7.png',title:'生意转让',url:''},
					{image:'/static/temp/c8.png',title:'征婚交友',url:''},
					{image:'/static/temp/c1.png',title:'宠物吧',url:''},
					{image:'/static/temp/c2.png',title:'商街',url:''}
				],
				redNav:[{title:'最新'},{title:'推荐'},{title:'最火'}],
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: '/static/temp/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: '/static/temp/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: '/static/temp/big39000.jpg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/temp/big99008.jpg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		computed: {
			
		},
		created(){
			//alert(newsdata.length);
		},
		methods: {
			goUrl(){
				uni.navigateTo({
					url: '/pages/store/info',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style lang='scss'>
	.header{
		height: 45px;
		.cu-bar{
			padding: 7px
		}
		/* #ifdef MP-WEIXIN*/  
		.search-form+.action{
			display: none;
		}
		.search-form{
			width:60%;
		}
		/* #endif */  
		.search-form{
			width:60%;
		}
	}
	.card-swiper uni-swiper-item{
		padding: 10px 0px 25px;
	}
	.nav{
		border-top: 6px solid #f1f1f1;
	}
	.news-wall{
		background-color: #ffffff;
		padding:15px;			
		.news-item{
			border-bottom: 1px solid #e6e7e8;
			padding: 10px 0;
			position: relative;			
			.news-title{
				width:70%;
				.title{
					padding-right: 10px;
					color: #111;
					font-size: 16px;
					line-height: 24px;
					.red{
						background-color: #fa436a;
						color: #ffffff;
						font-size: 12px;
						margin-right: 5px;
						padding:3px 10px;
						border-radius: 5px;
						vertical-align: middle;
						position: relative;
						top: -1px;
					}
				}
				.phone{
					margin-top: 8px;
				}
				.ts{
					margin-top: 15px;
					width:100%;
					font-size: 12px;
					color: gray;
					.cu-avatar{
						margin-right: 5px;
					}
					.else{
						position:absolute;
						right: 0px;
						bottom: 8px;
					}
					.new-comment{
						display: inline-block;
						margin-left: 20px;						
						.cuIcon-comment{
							margin-right: 3px;
							font-size: 18px;
							vertical-align: middle;
							position: relative;
							top: -1px;
							color: rgb(250, 67, 106);
						}
					}
				}
			}			
			.news-image{
				width:30%;
			}
			.news-image .img{
				width:100%;
				height: 80px;
				border-radius: 3px;
			}
		}
	}
</style>
